<template>
    <van-nav-bar title="优惠券详情" left-text="" left-arrow @click-left="goBack" />
    <van-row justify="center">
        <van-col span="24">
            <van-image width="100%" height="200" fit="cover"
                :src="info.thumb_text" />
        </van-col>
    </van-row>
    <div class="coupon_detail">
        <div class="coupon_info">
            <div class="left">
                <div class="left_top">
                    <div>
                        <span>{{ info.rate * 100 }}</span>折
                    </div>
                    <div class="top_info">
                        <div>优惠券</div>
                        <div>COUPON</div>
                    </div>
                </div>
            </div>
            <div class="receive">
                <button class="receive_btn" v-if="info.receive_text">已领取</button>
                <button class="right_btn" v-else @click="receiveEvent">立即领取</button>
            </div>
        </div>
        <div class="coupon_prompt">
            <div class="prompt_title">温馨提示：</div>
            <div><span>•</span>活动开始时间：{{ info.createtime_text }} </div>
            <div><span>•</span>活动开始时间：{{ info.endtime_text }} </div>
            <div><span>•</span>领取数量: {{ info.total }} 张,每人限领1张。赶快领取吧!</div>
        </div>
    </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const goBack = () => { proxy.$router.go(-1) }
const LoginUser = reactive(proxy.$cookies.get('LoginUser') ?? {})
const cid = proxy.$route.query.cid ? proxy.$route.query.cid  : 0;
const info = ref({})
onBeforeMount(() => {
    getCouponInfoData()
})
const getCouponInfoData = async() =>{
    let result = await Api.CouponInfo({
        cid: cid,
        busid: LoginUser.id ?? 0
    })
    if(result.code == 1)
    {
        info.value = result.data
    }
}
const receiveEvent = async() =>{
    let result = await Api.CouponReceive({
        cid: cid,
        busid: LoginUser.id ?? 0
    })
    if (result.code == 1) 
    {
        getCouponInfoData()
        success(result.msg);
    }
    else 
    {
        error(result.msg);
    }
}
</script>
<style>
@import url('/assets/css/coupon-info.css');
</style>